<template>
    <h1 @click="handleClick">{{ interTitle }}</h1>
    <input type="text" v-model="interTitle">

    <select v-model="choiceValue" name="pets" id="pet-select">
      <option v-for="(item) in petOptions" :key="item.value" :value="item.value"> {{ item.lable }}</option>
    </select>

    <br>
    <!-- 子组件是不能修改属性, 但是可以让父组件来修改 -->
    <button @click="$emit('update:count', count + 1)">You clicked me {{ count }} times.</button>

    <!-- 双向绑定的场景太多 -->
    <!-- 父组件 -props-- 子组件  --emit- 父组件 -->
    <!-- v-model   约定:modelValue   emit('update:modelValue') -->
</template>

<script setup>
import { reactive, ref, watch } from "vue";

// 如果为你的组件定义参数: 宏
// using Object syntax
const pros = defineProps({
  title: {
    type: String,
    required: true,
  },
  count: {
    type: Number,
    default: 0,
  }
})
// 属性是不能修改，是只读的 
// 对原来的属性进行包装: 
const interTitle = ref(pros.title) 
// interTitle.value = 'xxxx'
// pros.title = 'xxx'

// 将选择的只以事件的方式通知外面
const choiceValue = ref('')

// 下来列表
const petOptions = reactive([
  { lable: '--Please choose an option--', value: '' },
  { lable: 'Dog', value: 'dog' },
  { lable: 'Cat', value: 'cat' },
  { lable: 'Hamster', value: 'hamster' },
])

const emit = defineEmits(['selectChanged', 'update:count'])
// 给开发者提供了一种 watch 响应式数据变化的手段
watch(choiceValue, (v) => {
    // 怎么通知外面, 组件的实践 mq.send(xx)
    // mq.send('selectChanged', v)
    emit('selectChanged', v)
})


// 该元素反会的实践， 点击实践
const handleClick = (e) => {
    console.log(e)
}
</script>


<style scoped></style>